<template>
  <!-- Main content -->
  <section class='content'>
    <!-- Info boxes -->
    <!-- /.row -->
    <div class='row'>
      <div class='col-lg-6 col-md-6'>
        <div class='box box-primary'>
          <div class='ibox-title'>
            <h5>
              <i class='fa fa-bullhorn'></i>&nbsp;&nbsp;待办事项</h5>
          </div>
          <div class="ibox-content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="待办事项" name="handleView">
                <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; ">
                  <!-- style="position: relative; overflow: hidden; width: auto;" -->
                  <ul class="todo-list small-list" id="taskmenuUl" style="overflow: hidden; width: auto;">
                    <li v-for="item in handle" :key='item.id'>
                      <router-link to="/approvals">
                        <i class="fa fa-circle-o"></i>
                        <span class="m-l-xs">
                                  {{ getHandleTitle(item) }}
                                </span>
                      </router-link>
                    </li>
                    <li>
                      <router-link v-if="showHandleMore" to="/approvals">
                        <span class="m-l-xs">查看更多...</span>
                      </router-link>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我的申请" name="submitView">
                <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; ">
                  <ul class="todo-list small-list" id="taskmenuUl" style="overflow: hidden; width: auto;">
                    <li v-for="item in submit" :key='item.id'>
                      <router-link to="/submits">
                        <i class="fa fa-circle-o"></i>
                        <span class="m-l-xs">
                                  {{ getSubmitTitle(item) }}
                                </span>
                      </router-link>
                    </li>
                    <li>
                      <router-link v-if="showHandleMore" to="/submits">
                        <!-- <i class="fa fa-circle-o"></i> -->
                        <span class="m-l-xs">查看更多...</span>
                      </router-link>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class='col-lg-6 col-md-6'>
        <div class='box box-success'>
          <div class='ibox-title'>
            <h5>
              <i class='fa fa-pie-chart'></i>&nbsp;&nbsp;{{ degreeTitle}}</h5>
          </div>
          <div class='ibox-content'>
            <canvas id='degreeChart'></canvas>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
    <!-- Main row -->
    <div class='row'>
      <div class='col-lg-6 col-md-6'>
        <div class='box box-primary'>
          <div class='ibox-title'>
            <h5>
              <i class='fa fa-pie-chart'></i>&nbsp;&nbsp;{{ ageTitle}}</h5>
          </div>
          <div class='ibox-content'>
            <canvas id='ageChart'></canvas>
          </div>
        </div>
      </div>
      <div class='col-lg-6 col-md-6'>
        <div class='box box-success'>
          <div class='ibox-title'>
            <h5>
              <i class='fa fa-pie-chart'></i>&nbsp;&nbsp;{{ profTitle}}</h5>
          </div>
          <div class='ibox-content'>
            <canvas id='profChart'></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class='row'>
      <div class='col-lg-12 col-md-12'>
        <div class='box box-primary'>
          <div class='ibox-title'>
            <h5><i class='fa fa-bullhorn'></i>&nbsp;&nbsp;人事变更情况</h5>
            <div class="box-tools pull-right">
              <span>请选择时间</span>
              <el-date-picker v-model='startTime' type="date" placeholder="选择开始日期" format="yyyy 年 MM 月 dd " value-format="yyyy-MM-dd"></el-date-picker>
              <span>到</span>
              <el-date-picker v-model='endTime' type="date" placeholder="选择结束日期" format="yyyy 年 MM 月 dd" value-format="yyyy-MM-dd"></el-date-picker>
              <el-button type="success" @click="loadDiffers">
                <i class='fa fa-search'>查询</i>
              </el-button>
            </div>
          </div>
          <div class="box-body">
            <section class="content" id="departEmployees">
              <div class="row">
                <el-table stripe :empty-text='emptyText' :highlight-current-row='true' :data="differs" border>
                  <el-table-column type='index' label="序号" :width='80'></el-table-column>
                  <el-table-column v-for='col in this.diffcolumns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
                </el-table>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /.content -->
</template>

<script>
  import Chart from 'chart.js'
  import $ from 'jquery'
  import Utils from '../../common/utils'
  import approveUtils from '../../common/approveUtils'
  let util = new Utils()
  let appUtils = new approveUtils()
  export default {
    name: 'Dashboard',
    components: {},
    data() {
      return {
        emptyText: '空',
        activeName: 'handleView',
        ageTitle: '年龄区间',
        degreeTitle: '全日制学历统计',
        profTitle: '专业技术职称',
        startTime: '',
        endTime: '',
        graph: [],
        handle: [],
        submit: [],
        showHandleMore: false,
        showSubMitMore: false,
        differs: [],
        diffcolumns: appUtils.getDashDifferColumns()
      }
    },
    methods: {
      initTimes() {
        var endTime = util.date2str(new Date(), "yyyy-MM-dd")
        var startTime = util.getPreMonth(endTime)
        this.endTime = endTime
        this.startTime = startTime
      },
      getDashData() {
        var that = this
        util.getDashData((response) => {
          that.graph = response.body.body.graph
          that.handle = response.body.body.handle
          if (that.handle.length > 10) {
            that.handle = that.handle.slice(0, 10)
            that.showHandleMore = true
          }
          that.submit = response.body.body.submit
          if (that.submit.length > 10) {
            that.submit = that.submit.slice(0, 10)
            that.showSubMitMore = true
          }
          that.showGraph()
        }, (response) => {
          if(response.body.result == 3){
            that.showErrorInfo('权限不足,请跟管理员确认您有访问权限!')
          }
          else{
            that.showErrorInfo('加载数据失败,请刷新!')
          }
        })
      },
      showSucInfo(info) {
        this.$message({
          message: info,
          type: 'info'
        });
      },
      showErrorInfo(info) {
        this.$message({
          message: info,
          type: 'error'
        });
      },
      getHandleTitle(item) {
        return util.date2str(new Date(item.createTime * 1000), "yyyy-MM-dd hh:mm") + ' -- 【' + item.creatorName + '】' + '提交【' +
          this.getTypeInfo(item.type) + '】 需要您审核'
      },
      getSubmitTitle(item) {
        return '【您】在' + util.date2str(new Date(item.createTime * 1000), "yyyy-MM-dd hh:mm") +
          '提交给【' + item.approverName + '】的【' + this.getTypeInfo(item.type) + '】申请' + this.getStatInfo(item)
      },
      getStatInfo(item) {
        switch (item.state) {
          case 0:
            return '正在【审核中】'
          case 1:
            return '已经【审核通过】'
          case 2:
            return '已被【拒绝】'
        }
      },
      getTypeInfo(type) {
        switch (type) {
          case 0:
            return '新增用户'
          case 1:
            return '修改用户信息'
          case 2:
            return '删除用户'
        }
      },
      getChartType(type) {
        if (type == 1) {
          return 'bar'
        }
        if (type == 2) {
          return 'pie'
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      setTitle(index, name) {
        if (index == 0) {
          this.ageTitle = name
        }
        if (index == 1) {
          this.degreeTitle = name
        }
        if (index == 2) {
          this.profTitle = name
        }
      },
      parseGraph() {
        var graph = this.graph
        var chartDataArray = []
        for (var index in graph) {
          var item1 = graph[index]
          this.setTitle(index, item1.name)
          var chartData = {
            name: item1.name,
            type: this.getChartType(item1.type),
            cols: [],
            data: []
          }
          chartData.cols = Object.keys(item1.data)
          for (var propIndex in chartData.cols) {
            chartData.data.push(item1.data[chartData.cols[propIndex]])
          }
          chartDataArray.push(chartData)
        }
        return chartDataArray
      },
      loadDiffers() {
        var that = this
        var start = new Date(this.startTime)
        var end = new Date(this.endTime)
        var data = {
          startTime: new Date(start).getTime()/1000,
          endTime: new Date(end).getTime()/1000
        }
        appUtils.listDiffers(data, response => {
            if (response.body.result == 1) {
              console.log(
                "get differs data id " + JSON.stringify(response.body)
              );


              that.differs = response.body.body;
            } else if (response.body.result == 2) {
              that.showErrorInfo("权限不够,请联系管理员!");
            }
          },
          response => {
            console.log("get differs failed:" + response.data);
          })
      },
      showGraph() {
        var graph = this.graph
        var ageChart = document.getElementById('ageChart').getContext('2d')
        var degreeChart = document.getElementById('degreeChart').getContext('2d')
        var profChart = document.getElementById('profChart').getContext('2d')
        var charts = [ageChart, degreeChart, profChart]
        var chartOptions = {
          responsive: true,
          maintainAspectRatio: !this.isMobile,
          legend: {
            position: 'bottom',
            display: true
          }
        }
        var barChartOption = {
          responsive: true,
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          },
          legend: {
            position: 'bottom',
            display: true
          }
        }
        var chartIds = ['ageChart', 'degreeChart', 'profChart']
        var graphData = this.parseGraph()
        for (var index in graphData) {
          var chartData = graphData[index]
          var option = chartOptions
          if (chartData.type == 'bar') {
            option = barChartOption
          }
          var config = {
            type: chartData.type,
            data: {
              labels: chartData.cols,
              datasets: [{
                label: chartData.name,
                data: chartData.data,
                backgroundColor: ['#00a65a', '#dd4b39', '#f39c12', '#00c0ef'],
                hoverBackgroundColor: ['#00a65a', '#dd4b39', '#f39c12', '#00c0ef']
              }]
            },
            options: option
          }
          new Chart(charts[index], config) // eslint-disable-line no-new
        }
      }
    },
    computed: {
      isMobile() {
        return (window.innerWidth <= 800 && window.innerHeight <= 600)
      }
    },
    created() {
      this.initTimes()
      this.loadDiffers()
    },
    mounted() {
      this.getDashData()
    }
  }
</script>

<style>
  .info-box {
    cursor: pointer;
  }
  .info-box-content {
    text-align: center;
    vertical-align: middle;
    display: inherit;
  }
  .fullCanvas {
    width: 100%;
  }
</style>
